<template>
	<view class="orderPay">
		<view class="pay_num_box">
			<view class="fn-sz-30 fn-cl-666666 text-center mar-bottom-20">支付金额</view>
			<view class="fn-cl-333333 text-center">
				<span class="fn-sz-30">￥</span>
				<span class="fn-sz-90">{{ payOrderPrice }}</span>
			</view>
		</view>
		<view class="row_box">
			<view class="fn-sz-240">金币抵扣</view>
			<view class="deductible_box">
				<image class="icon-30 mar-right-8" @tap="changCoinPay('yes')" v-if="if_coin == 'no'"
					src="../../static/images/icon/icon_check_raido_gary.png" mode=""></image>
				<image class="icon-30 mar-right-8" @tap="changCoinPay('no')" v-else
					src="../../static/images/icon/icon_check_raido_fill.png" mode=""></image>
				<span class="fn-sz-26 fn-cl-999999">可抵扣 ￥{{ resData.coin_price }}元</span>
			</view>
		</view>
		<view class="fn-sz-30 mar-bottom-30">支付方式</view>
		<view class="pay_list">
			<view class="save_money_pay" @tap="balancePay">
				<image class="icon-36 mar-right-8" src="../../static/images/icon/icon_save_money_pay.png" mode="">
				</image>
				<span class="fn-sz-30 fn-cl-FFFFFF">省钱卡支付</span>
			</view>
			<view class="wechat_pay" @tap="weiXinPay">
				<image class="icon-36 mar-right-8" src="../../static/images/icon/icon_wechat_pay.png" mode=""></image>
				<span class="fn-sz-30 fn-cl-FFFFFF">微信支付</span>
			</view>

		</view>
		<u-keyboard tips="请输入支付密码" mode="number" :show="keyBoardShow" @change="tapKeyboard" @cancel="cancelKeyboard"
			@close="closeKeyboard" @backspace="backKeyboard" @confirm="confirmKeyboard">
			<view class="password_box">
				<view class="word_item" v-for="(item, index) in pay_pwd.length" :key="index"></view>
			</view>
		</u-keyboard>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id: '136',
				payInfo: {},
				if_score: 'no',
				if_coin: 'no',
				curCoupon: {},
				pay_pwd: '',
				keyBoardShow: false,
				userInfo: {},
				resData: {}
			};
		},
		onLoad(val) {
			if (val.resData) {
				this.resData = JSON.parse(val.resData);
			}
			// this.getPayInfo();
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo').member;
		},
		methods: {
			getPayInfo() {
				this.$api.unifiedOrder({
					order_id: this.resData.order_id,
					pay_type: 'wxpay',
				}).then(res => {
					console.log(res, '获取支付信息');
					if (res.code == 1) {
						this.payInfo = res.data.pay_info;
					}
				});
			},
			changScorePay(type) {
				this.if_score = type;
			},
			changCoinPay(type) {
				this.if_coin = type;
			},
			tapKeyboard(e) {
				if (this.pay_pwd.length <= 16) {
					this.pay_pwd += e;
					console.log(this.pay_pwd, '当前密码');
				} else {
					this.$helper.toast('支付密码最长16位!');
				}
			},
			cancelKeyboard(e) {
				this.keyBoardShow = false;
				this.pay_pwd = '';
			},
			closeKeyboard(e) {
				this.keyBoardShow = false;
				this.pay_pwd = '';
			},
			backKeyboard() {
				console.log('撤退');
				this.pay_pwd = this.pay_pwd.slice(0, this.pay_pwd.length - 1);
			},
			confirmKeyboard() {
				console.log('确定');
				let params = {
					order_id: this.resData.order_id,
					if_score: this.if_score,
					if_coin: this.if_coin,
					coupon_id: 0,
					pay_pwd: this.pay_pwd
				};
				if (this.curCoupon.id) {
					params.coupon_id = this.curCoupon.id;
				}
				this.$api.balanceGroPay(params).then(res => {
					console.log(res, '获取支付信息');
					this.$helper.toast(res.msg);
					if (res.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: `/pages/adoptRecords/adoptRecords`
							});
						}, 800);
					}
				});
			},
			balancePay() {
				if (this.userInfo.pay_pwd) {
					this.keyBoardShow = true;
				} else {
					uni.navigateTo({
						url: '/pages/mine/changePassword?type=payOrder'
					});
				}
			},
			goChooseCoupon() {
				if (this.curCoupon) {
					uni.navigateTo({
						url: `/pages/coupon/chooseCoupon?order_id=${this.order_id}&couId=${this.curCoupon.id}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/coupon/chooseCoupon?order_id=${this.order_id}`
					});
				}
			},
			chooseCoupon(val) {
				this.curCoupon = val;
			},
			weiXinPay() {
				let params = {
					order_id: this.resData.order_id,
					if_coin: this.if_coin
				};
				this.$api.miniGroUnifiedOrder(params).then(res => {
					console.log(res, '小程序支付回调');
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.pay_info.timeStamp,
							nonceStr: res.data.pay_info.nonceStr,
							package: res.data.pay_info.package,
							signType: res.data.pay_info.signType,
							paySign: res.data.pay_info.paySign,
							success: function(rex) {
								console.log('success:' + JSON.stringify(rex));
								setTimeout(() => {
									uni.redirectTo({
										url: `/pages/adoptRecords/adoptRecords`
									});
								}, 800);
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								this.$helper.toast('支付失败');
								// uni.switchTab({
								// 	url: '/pages/home/home'
								// });
							}
						});
					}
				});
			}
		},
		computed: {
			payOrderPrice() {
				var totalPrice = this.resData.total_price * 1;
				if (this.if_coin == 'yes') {
					totalPrice = totalPrice - this.resData.coin_price;
				}
				if (totalPrice) {
					return totalPrice.toFixed(2);
				} else {
					return 0;
				}
			}
		}
	};
</script>

<style lang="scss">
	.orderPay {
		padding: 24rpx;
		min-height: 100vh;
		background-color: #f9f9f9;

		.pay_num_box {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 46rpx 24rpx;
			margin-bottom: 30rpx;

			.text-center {
				text-align: center;
			}

			.order_pay_num_datails {
				margin-top: 47rpx;
				border-top: 4rpx dashed #666666;
				padding-top: 20rpx;
			}
		}

		.row_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 24rpx;

			.deductible_box {
				display: flex;
				align-items: center;
			}
		}

		.pay_list {

			.wechat_pay,
			.save_money_pay {
				height: 90rpx;
				background: #09bb07;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 40rpx;
			}

			.save_money_pay {
				background-color: #fed100;
			}
		}

		.password_box {
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ffffff;

			.word_item {
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background-color: #333;
				margin-right: 10rpx;
			}
		}
	}
</style>